import utils from "@/js/utils";
import {
    serverUrl
} from "@/js/settings";
import request from "@/js/request";
import moment from "./moment";

import "@/scss/base.scss";
import "@/scss/common.scss";
import "./index.scss";


$(function() {
    // localStorage.clear();
    if (localStorage.getItem('errorObject') == null) {
        return;
    }
    var errNote = JSON.parse(localStorage.getItem('errorObject'))
    var length = errNote.length
    var content_index = 0;

    fillScore();
    fillContent(content_index);

    $('.right').click(function() {
        if ((length - content_index) > 1) {
            content_index++;
            fillContent(content_index);
        }
    });

    $('.left').click(function() {
        if (content_index > 0) {
            content_index--;
            fillContent(content_index);
        }
    });

    function fillContent(index) {
        var ic = index + 1 + "/" + length
        fill_content_index(ic);
        var item = errNote[index];
        console.log("title" + item.title);
        fill_content(item);
        fill_desc(item);
    }

    function fill_content_index(ic) {
        var index_content = "";
        console.log(ic)
        index_content += `
        <span>${ic}</span>
        `
        $("#countDownTime").html(index_content);
    }

    function fill_content(item) {
        var html = "";
        html += `
        <div class="content_title">${item.title}</div>
        <div class="content_answer">
            <div class="answer_line_1">
                <div class="optional_1">${item.optional_1}</div>
                <div class="optional_2">${item.optional_2}</div>
            </div>
            <div class="answer_line_2">
                <div class="optional_3">${item.optional_3}</div>
                <div class="optional_4">${item.optional_4}</div>
            </div>
        </div>
        `
        $(".error_content").html(html);
    }

    function fill_desc(item) {
        var class_answer = item.answer;
        $("." + class_answer).css("color", "#1fecae");
        var select_answer = item.select;
        console.log("select: " + select_answer);
        if (class_answer == select_answer) {
            $("." + select_answer).css("color", "#1fecae");
        } else {
            $("." + select_answer).css("color", "#ff9292f7");
        }

        var correct;
        if (class_answer == 'optional_1') {
            correct = item.optional_1;
        } else if (class_answer == 'optional_2') {
            correct = item.optional_2;
        } else if (class_answer == 'optional_3') {
            correct = item.optional_3;
        } else {
            correct = item.optional_4;
        }

        var my_correct;
        if (select_answer == 'optional_1') {
            my_correct = item.optional_1;
        } else if (select_answer == 'optional_2') {
            my_correct = item.optional_2;
        } else if (select_answer == 'optional_3') {
            my_correct = item.optional_3;
        } else if (select_answer = 'optional_no') {
            my_correct = '未作答';
        }
        console.log("正确答案：" + correct + " 我的答案: " + my_correct)
        var html_answer = "";
        html_answer += `
        <div class="correct_answer">
            正确答案:&nbsp
            <span>${correct}</span>
            <div class="err_note">已加入错题本</div>
        </div>
        <div class="my_answer">
            我的答案:&nbsp
            <span>${my_correct}</span>
        </div>
        <div class="answer_content">
            答案解析:&nbsp
            <span>${item.analysis}</span>
        </div>
        `
        $(".answer_desc").html(html_answer);
    }

    function fillScore() {
        var left_score = localStorage.getItem("leftScore");
        var rightScore = localStorage.getItem("rightScore");

        var left_html_score = "";
        left_html_score += `
        阿鬼鬼&nbsp&nbsp|&nbsp&nbsp<span>${left_score}</span>
        `
        $(".player_left_name").html(left_html_score);

        var right_html_score = "";
        right_html_score += `
        阿飒飒&nbsp&nbsp|&nbsp&nbsp<span>${rightScore}</span>
        `
        $(".player_right_name").html(right_html_score);
    }
})